<script setup lang="ts">
import { computed } from 'vue';
import { useStory } from '../../../../../composables';
import { EVENTS, GameKernel } from '../../../../../game';
import { STORY_ID, type StoryId } from '../../../../../game/data/story';

const { state: storyState } = useStory();

const npcList: { id: StoryId; name: string }[] = [
  {
    id: STORY_ID.FANG_SHI_BAI_ZHAN_BU_DAI_CULTIVATION_SKILL,
    name: '黑衣人-少安',
  },
];

const renderNpcList = computed(() => {
  return npcList.filter((item) => !storyState.value.completedStory[item.id]);
});
</script>

<template>
  <div class="w-full h-full overflow-auto">
    <div v-if="renderNpcList.length" class="grid grid-cols-2 gap-2 p-2">
      <a-button
        v-for="npc in renderNpcList"
        :key="npc.id"
        @click="GameKernel.inst.bus.emit(EVENTS.STORY_START, npc.id)"
        >{{ npc.name }}</a-button
      >
    </div>
    <div v-else class="p-2">
      <a-card>
        <div class="text-center">空无一人</div>
      </a-card>
    </div>
  </div>
</template>
